<template>
  <div class="productProNew">
    <div class="title"><h1><span>编辑</span></h1></div>
    <form name="newContent" class="basicInfor">
      <div class="form-group required">
        <label :for="'guiderName'+$attrs.text">姓名：</label>
        <input autocomplete="off" type="text" class="form-control proName" :id="'guiderName'+$attrs.text" placeholder="请输入姓名" required v-model="details.name" />
      </div>
      <div class="form-group required">
        <label :for="'guiderPhone'+$attrs.text">电话：</label>
        <input autocomplete="off" type="number" min="1" class="form-control proName" :id="'guiderPhone'+$attrs.text" placeholder="请输入电话" v-model="details.mobile" />
      </div>
      <div class="form-group required">
        <label class="destxt" :for="'gender'+$attrs.text">性别：</label>
        <input autocomplete="off" type="text" class="form-control proName" :id="'gender'+$attrs.text" placeholder="请输入性别" required v-model="details.gender" />
      </div>
      <div class="form-group required">
        <label class="destxt" :for="'rank'+$attrs.text">等级：</label>
        <input autocomplete="off" type="number" min="1" max="5" class="form-control proName" :id="'rank'+$attrs.text" placeholder="请输入等级" required v-model="details.rank" />
        <span class="g-tips">（请填写1~5之间的整数）</span>
      </div>
      <div class="form-group required">
        <label class="destxt" :for="'tuanTotal'+$attrs.text">出团总数：</label>
        <input autocomplete="off" type="number" min="0" class="form-control proName" :id="'tuanTotal'+$attrs.text" placeholder="请输入出团总数" required v-model="details.tuanTotal" />
        <span class="g-tips">（请填写数字）</span>
      </div>
      <div class="form-group">
        <label class="destxt" :for="'uid'+$attrs.text">身份证编号：</label>
        <input autocomplete="off" class="form-control proName" :id="'uid'+$attrs.text" placeholder="请输入身份证编号" required v-model="details.idSn">
      </div>
      <div class="form-group">
        <label class="destxt" :for="'passportno'+$attrs.text">护照编号：</label>
        <input autocomplete="off" class="form-control proName" :id="'passportno'+$attrs.text" placeholder="请输入护照编号" required v-model="details.passportSn">
      </div>
      <div class="form-group">
        <label class="destxt" :for="'guiderno'+$attrs.text">导游编号：</label>
        <input autocomplete="off" class="form-control proName" :id="'guiderno'+$attrs.text" placeholder="请输入导游编号" required v-model="details.guideSn">
      </div>
      <div class="form-group">
        <label class="destxt" :for="'remark'+$attrs.text">备注：</label>
        <textarea class="form-control proDes" :id="'remark'+$attrs.text" rows="6" placeholder="请输入备注信息" v-model="details.demo"></textarea>
      </div>
      <button type="button" class="btn btn-info confirmBtn" @click="submitPro()">确定</button>
    </form>
  </div>
</template>
<script>
    export default {
      data(){
        return{
          details: {},
          detailHttp: '',
          editHttp: ''
        }
      },
      computed:{
        guiderView(){//
          return this.$store.state.interface.guiderView;
        },
        editGuider () {
          return this.$store.state.interface.addGuider;
        }
      },
      components:{},
      methods:{
        submitPro(){ //提交判断是否信息完整
          let self = this;
          let detail = self.details;
          let isMobile = /^(13|14|15|17|18)\d{9}$/;
          if (detail.name === '') {
            layer.msg('请填写姓名！');
            return false
          }
          if (!isMobile.test(detail.mobile)) {
            layer.msg('请填写11位有效手机号');
            return false
          }
          if (detail.gender === '') {
            layer.msg('请填写性别！');
            return false
          }
          if (detail.rank === '') {
            layer.msg('请填写等级！');
            return false
          }
          if (isNaN(detail.rank * 1)) {
            layer.msg('等级应为1~5的数字！');
            return false
          }
          if (detail.tuanTotal === '') {
            layer.msg('请填写出团数！');
            return false
          }
          if (isNaN(detail.tuanTotal * 1)) {
            layer.msg('出团数应为数字！');
            return false
          }
          let formData = new FormData(); // 基础信息表单数据
          formData.append('name', detail.name);
          formData.append('mobile', detail.mobile);
          formData.append('gender', detail.gender);
          formData.append('rank', detail.rank);
          formData.append('tuanTotal', detail.tuanTotal);
          formData.append('idSn', detail.idSn);
          formData.append('guideSn', detail.guideSn);
          formData.append('passportSn', detail.passportSn);
          formData.append('area', 'ss');
          formData.append('demo', detail.demo);

          self.$ajax.post(self.editHttp,formData).then(function(res) {
            let result = res.data.result || '';
            if(res.data.code === '10000' && result.WbGuide){
              layer.msg('修改成功！');
            }else{
              self.codes(res.data.code);
              layer.msg('修改失败！');
            }
          },function(res) {
            layer.msg('修改失败！');
          });
        }
      },
      beforeMount(){
        let self = this;
        let editUrl = self.editGuider;
        let sessionId = JSON.parse(sessionStorage.getItem('customer')).sid;
        self.editHttp = `${editUrl}?sid=${sessionId}`;
        self.detailHttp = `${self.guiderView}?sid=${sessionId}`;
        self.$ajax.post(`${self.detailHttp}&id=${self.$attrs.proid}`).then(function(res) {
          if(res.data.code === '10000' ){
            self.details=res.data.result.WbGuide;
          }else{
            layer.msg('加载失败！');
          }
        },function(res) {
          layer.msg('服务器错误！');
        });
      },
      mounted(){}
    }
</script>
<style lang="scss" scoped>
  form{
    display:block;
  }
  .title{
    color:#4e5e7e;
  }
  .form-control.like-textarea, .form-control.proDes, .form-group .mainImg{
    width: 70%;
  }
  .g-tips{margin-left:10px;color:#999;}
</style>
